<template>
	<div id="sellchildleft">
		<ul class="left">
			<li v-for="(sh,index) in shopmessage" @click ="jump(index,$event)" >{{sh.name}}</li>
		</ul>
		<div class="right" >
			<ul>
				<li v-for="sh in shopmessage">
					<p class="title">{{sh.name}}<span>{{sh.description}}</span></p>
					<div v-for="s in sh.foods" class="content">					
						<div><img v-if="isLoad" :src="'https://fuss10.elemecdn.com/'+jpeg(s.image_path)" alt="图片无法显示"/></div>
						<div class="context">
							<p style="font-size: 18px;font-weight: 800;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{s.name}}</p>
							<p style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{s.description}}</p>
							<p style="font-size: 12px;">{{s.tips}}</p>	
							<p style="color: #ff6600;font-size: 18px;font-weight: 800;">￥{{s.month_sales}}</p>
						</div>					
					</div>										
				</li>
			</ul>
		</div>
		<div style="height: 30px; clear: both;"></div>
	</div>
</template>

<script type="text/javascript">
	import axios from 'axios'
	import $ from '../../assets/jquery.js'
	import '../../assets/Font-Awesome-3.2.1/css/font-awesome.min.css'
	export default{
		name:'left',
		data:function(){
			return{
				shopmessage:{},
				isLoad:false,
			}
		},
		methods:{
			jpeg:function(value){
				if(value == null){
					return
				}else{
					var out 				
					var result = value.substring(value.length-3)
					if(result == 'peg'){
						out = value + '.jpeg'
					}else{
						out = value + '.png'
					}
					var result1 = out.substring(0,1) + '/' + out.substring(1,3) + '/' + out.substring(3)
					return result1
				}
				
			},
			jump:function(index,e){
				console.log(index)
				$(e.target).css('border-left','2px solid #3190e8').siblings().css('border-left', '0px');
				$(e.target).css('background','white').siblings().css('background', '#f8f8f8');
				var height = this.shopmessage[index].foods.length
				var moveheight = 0
				for(var i=0;i<index;i++){
					moveheight = moveheight + this.shopmessage[i].foods.length*140 + 40
				}
				$(".right").animate({scrollTop:moveheight}, 200);
			}
		},
		mounted:function(){
			var id = this.$route.params.id
			axios.get('https://mainsite-restapi.ele.me/shopping/v2/menu?restaurant_id='+id)
			.then(function(res){
				console.log(res)
				this.shopmessage = res.data
				this.isLoad = true
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
		}
	}
</script>

<style type="text/css" scoped="scoped">
	*{box-sizing: border-box;}
	.left{width: 25vw;float: left;font-size: 16px;height: 440px;overflow-y :auto;color: #666666;}
	.left li{border-bottom: 1px solid #ededed; padding: 0px 10px;height: 50px;line-height: 50px;overflow: hidden;background: #f8f8f8;}
	.right{float: left;height:440px;width: 74vw;overflow-y:auto;}
	.title{background-color: #f1f1f1;height: 40px;color: #666666;line-height: 40px;font-size: 18px;padding-left:20px;font-weight: 800;}
	.title span{font-size: 12px;color: #999999;margin: 5px 0px 0px 10px;font-weight: 500;}
	.content{border-bottom: 1px solid #ededed;height: 140px;background: white;padding-top: 10px;}
	.content p{margin: 5px;}
	.content div:nth-of-type(1){float: left; width: 100px;height: 100px;}
	.content div:nth-of-type(1) img{width: 100px;height: 100px;font-size: 12px;border-radius: 10px;}
	.content div:nth-of-type(2){float: left;padding-left:20px ;width: 200px;}
</style>